<style>
body {
  background-image: url("../../public/loginImg.png");
  background-size: cover; /*设置封面*/
}

.layout-header {
  background: rgba(255, 255, 255, 0.5);
  color: #fff;
  text-align: left;
  font-size: 20px;
  line-height: 60px;
}

.span {
  position: absolute;
  left: 100px;
}

.layout-side {
  width: 660px !important;
  height: 1000px;
}

a {
  text-decoration: none;
  margin-left: 20px;
  font-size: 25px;
}

/*-----------------------------------------------*/
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  color: rgba(255, 255, 255, 0.5);
  width: 600px;
  height: 120px;
  margin-bottom: 10px;
}

.title {
  color: white;
  margin-left: 240px;
  margin-bottom: 20px;
  font-size: 35px;
  font-family: 方正姚体
}

.box-card {
  color: #303133;
}

/*--------------------------------------------------*/
/*悬停*/
a:hover {
  color: #322727;
}

/*点击*/
a:active {
  color: brown
}

/*--------------------------------------------------*/
</style>
<template>
  <div>
    <el-container>
      <el-header class="layout-header">
        <div class="block">
          <el-avatar :size="60"
                     :src="user.avatar"/>
          <span class="span">{{ user.nickname }}欢迎回来!</span>
          <span style="float: right">
            <a href="/">主页</a>
            <a href="javascript:void(0)" @click="my()">我的</a>
            <a href="/createArticle">创作</a>
            <a href="javascript:void(0)" @click="logout()">退出登录</a>
          </span>
        </div>
      </el-header>
      <el-container>
        <el-aside class="layout-side">
          <div class="block" style="float: right;margin-top: 60px">
            <el-avatar :size="120"
                       :src="user.avatar"/>
            <p style="color: white;font-family: 幼圆;text-align: center">昵称:{{ user.nickname }}</p>
            <p style="color: white;font-family: 幼圆;text-align: center">评论量:{{ user.articleCount }}</p>
          </div>
        </el-aside>
        <el-main class="layout-main">
          <p class="title">消息列表</p>
          <el-card shadow="hover" class="box-card" v-for="item in homeList">
            <div slot="header" class="clearfix">
              <span style="font-size: 22px">{{ item.title }}</span> &nbsp<span>{{ item.gmtCreate }}</span>

              <el-button style="float: right; padding: 3px 0" type="text"
                         @click="articleDetail(item.userId,item.articleId)">查看详情
              </el-button>

            </div>
            <div class="text item">
              {{ item.nickname }}:&nbsp{{ item.description }}
            </div>
          </el-card>
          <el-pagination class="pagination"
                         background
                         @current-change="handleCurrentChange"
                         :current-page="currentPage"
                         :page-sizes="[5]"
                         :page-size="size"
                         layout="total,sizes,prev, pager, next, jumper"
                         :total="total">
          </el-pagination>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentPage: 1, // 当前页
      total: '', // 数据总数
      size: 5, // 每页的数据量(可选择)
      user: {
        username: '',
        articleCount: '',
        avatar: '',
        id: '',
      },
      ruleForm: {
        username: '',
      },
      homeList: [
        {userId: '', articleId: '', title: '', gmtCreate: '', nickname: '', description: ''}
      ],
    };
  },
  methods: {
    open1() {
      const h = this.$createElement;
      this.$notify({
        title: 'Hello!',
        message: h('i', {style: 'color: orange'}, 'Welcome to the blog homepage, please start your new journey!'),
        showClose: false
      });
    },
    handleCurrentChange(val) { // 该方法配合current-page属性，由属性监控，方法回调
      this.currentPage = val; // 将当前页赋值给变量
      // 向后端发送请求
      console.log(this.currentPage)
      let url = this.GLOBAL.blog + 'articles/' + this.currentPage + '/home';
      this.axios
          .create({
            'headers': {
              'Authorization': localStorage.getItem('jwt')
            }
          }).get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.homeList = responseBody.data;
        } else {
          this.$message.error(responseBody.message);
        }
      })
    },
    // 加载本地的表单中的数据,存放到roleForm中去
    loadLocalRuleForm() {
      let localRuleFormString = localStorage.getItem('ruleForm');
      if (localRuleFormString) {
        let localRuleForm = JSON.parse(localRuleFormString);
        this.ruleForm.username = localRuleForm;
      }
    },
    // 退出登录
    logout() {
      localStorage.removeItem('ruleForm');
      let url = this.GLOBAL.blog + 'users/logout'
      this.axios.get(url).then(() => {
        location.href = "/login"
      })
    },
    // 加载用户详情信息
    loadUserDetail() {
      let url = this.GLOBAL.blog + 'users/';
      let formData = this.qs.stringify(this.ruleForm);
      this.axios
          .create({
            'headers': {
              'Authorization': localStorage.getItem('jwt')
            }
          }).post(url, formData).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.user = responseBody.data;
          this.user.avatar = require('../../../public' + this.user.avatar);// 将修改图片的原图设置为获取并处理后的路径
        } else {
          this.$message.error(responseBody.message);
        }
      })
    },
    articleDetail(userId, articleId) {
      this.$router.push('/articleDetail?userId=' + userId + '&articleId=' + articleId + '');
    },
    my() {
      location.href = "/userDetail?userId=" + this.user.id;
    },
    // 加载主页列表信息
    loadHomeList() {
      let url = this.GLOBAL.blog + 'articles/1/home';
      this.axios
          .create({
            'headers': {
              'Authorization': localStorage.getItem('jwt')
            }
          })
          .get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.homeList = responseBody.data;
        } else {
          if (responseBody.message == '登录信息已过期，请重新登录！') {
            location.href = "/login";
          }
          this.$message.error(responseBody.message);
        }
      })
    },
    loadHomeTotal() {
      let url = this.GLOBAL.blog + 'articles/selectTotal';
      this.axios
          .create({
            'headers': {
              'Authorization': localStorage.getItem('jwt')
            }
          }).get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.total = responseBody.data;
        } else {
          this.$message.error(responseBody.message);
        }
      })
    }
  },
  mounted() {
    this.loadLocalRuleForm();
    this.loadUserDetail();
    this.loadHomeList();
    this.open1();
    this.loadHomeTotal();
  },
}
</script>